import React, { useState } from 'react';
import { Button, Card, Space } from 'antd'
import { connect } from 'umi';
import DrawerCondition from '@/components/DrawerCondition';
import PopImgShow from '@/components/PopImgShow';
import DeleteModel from './../DeleteModel'
import SettingCard from './components/SettingCard'
import './index.less'
import { useEffect } from 'react';
const Details = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
  const { detail = {}, show = false } = visible;
  const { id } = detail
  const [data, setData] = useState({})
  const [deleteVisible, setDeleteVisible] = useState(false)
  const { picture = '', goodsName, status, skuHighPrice, price, priceType } = data

  useEffect(() => {
    if (show) {
      fetchData()
    }
    else {
      setData({})
    }
  }, [show])
  const fetchData = () => {
    dispatch({
      type: 'liveStreaming/fetchVideoCourseDetail',
      payload: { goodsId: id },
      callback: (e) => {
        const {
          goodsBaseInfo = {},

        } = e
        setData({
          ...goodsBaseInfo,
        })
      }
    })
  }
  return (
    <Card title='面授详情' extra={<Button onClick={() => onClose()} type='link'>返回列表</Button>}>
      <Space style={{ display: 'flex', width: '100%', alignItems: 'flex-start', position: 'relative' }}>
        <PopImgShow width={100} url={picture.split(',')[0]}></PopImgShow>
        <div>
          <div style={{ fontSize: 18, fontWeight: 'bold' }}>{goodsName}</div>
          {priceType === 'money' ? <div style={{ marginTop: 8, color: '#fb6161' }}>￥{price}</div> : <div style={{ marginTop: 8, color: '#fb6161' }}>免费</div>}
          <Space style={{ marginTop: 12 }}>
            <Button onClick={() => {
              dispatch({
                type: 'login/findAccessId',
                payload: {
                  pathname: '/marketingModule/createFaceToFace',
                  query: {
                    id: id,
                  },
                  linkPush: 'open'
                },
              });
            }} type='primary'>编辑</Button>
            <Button onClick={() => {
              dispatch({
                type: status === '0' ? 'liveStreaming/fakeUpFaceToFaceGoods'
                  : 'liveStreaming/fakeDownFaceToFaceGoods',
                payload: { goodsIdList: [id] },
                callback: () => {
                  fetchData()
                  handleCallback()
                }
              })
            }} >{status === '0' ? '上架商品' : '下架商品'}</Button>
            <Button danger onClick={() => setDeleteVisible({
              show: true,
              detail: data
            })}>删除 </Button>
          </Space>
        </div>
        <div style={{ position: 'absolute', right: 0, top: 0 }}>
          {status === '0' ? '已下架' : '已上架'}
        </div>
      </Space >
      <SettingCard data={data}></SettingCard>
      <DeleteModel onFatherClose={onClose} handleCallback={() => {
        dispatch({
          type: 'login/findAccessId',
          payload: {
            pathname: '/marketingModule/faceToFaceList',
          },
        });
      }} onClose={() => setDeleteVisible(false)} visible={deleteVisible}></DeleteModel>
    </Card >


  );
};
export default Details;
